<h3 class="page-title">
    <a [routerLink]="['/team']"><strong>Team</strong></a>
    <span>{{" - Manage Members"}}</span>   
    <span><strong>{{" / " + team.name}}</strong></span> 
    &nbsp;&nbsp;
    <a [routerLink]="['/team']"><i class="fa fa-reply-all" title="back"></i></a>
</h3>
<div class="row">
    <div class="col-lg-6">
        <section class="widget">
            <div class="widget-body">
                <legend>
                    Members in {{team.name}}
                    <!-- <button type="button" class="btn btn-inverse btn-sm pull-right pull-right" (click)="cancelAdd()">
                        <i class="fa fa-reply"></i> Cancel
                    </button> -->
                    <button type="button" class="btn btn-danger btn-sm pull-right" (click)="updateMembers('remove')">
                        <i class="fa fa-external-link"></i> 
                        <span>Remove</span>
                    </button>
                </legend>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th width="50px">
                                <div class="checkbox abc-checkbox abc-checkbox-primary">
                                    <input id="check-all-remove" class="styled" type="checkbox" (click)="toggleMember($event,'remove')" check-all>
                                    <label for="check-all-remove">
                                    </label>
                                </div>
                            </th>
                            <th width="10%">#</th>
                            <th width="20%">User Name</th>
                            <!-- <th>Authority</th> -->
                            <th>Info</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let member of members; let i = index">
                            <td>
                                <div class="checkbox abc-checkbox abc-checkbox-primary">
                                    <input id="{{'member' + i }}" class="styled" type="checkbox" value="{{ member }}" (click)="toggleMember($event,'remove', member.username)">
                                    <label [attr.for]="'member' + i">
                                    </label>
                                </div>
                            </td>
                            <td>{{ (i+1) }}</td>
                            <td>{{ member }}</td>
                            <td>
                               <!--  <span class="label label-info">Read</span> 
                                <span class="label label-info">Write</span> -->
                                <span class="label label-info">Online</span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm" (click)="clickToOperate(member,'remove')">
                                    <i class="fa fa-external-link"></i> 
                                    <span>Remove</span>
                                </button>
                             <!--    <button type="button" class="btn btn-primary btn-sm" (click)="editAuthority(team.id, member)">
                                    <i class="fa fa-pencil"></i> Manage Authority
                                </button> -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
<!-- </div> -->
<!-- <div class="row"> -->
    <div class="col-lg-6">
        <section class="widget">
            <div class="widget-body">
                <legend>
                    Add Member to {{team.name}}
                    <!--  <button type="button" class="btn btn-inverse btn-sm pull-right pull-right" (click)="cancelAdd()">
                        <i class="fa fa-reply"></i> Cancel
                    </button> -->
                    <button type="button" class="btn btn-success btn-sm pull-right" (click)="updateMembers('add')">
                        <i class="fa fa-plus"></i> 
                        <span>Add</span>
                    </button>
                </legend>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th width="50px">
                                <div class="checkbox abc-checkbox abc-checkbox-primary">
                                    <input id="check-all" class="styled" type="checkbox" (click)="toggleMember($event,'add')" check-all>
                                    <label for="check-all">
                                    </label>
                                </div>
                            </th>
                            <th width="10%">#</th>
                            <th width="20%">User Name</th>
                            <th>Info</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let other of others; let i = index">
                            <td>
                                <div class="checkbox abc-checkbox abc-checkbox-primary">
                                    <input id="{{'other' + i }}" class="styled" type="checkbox" value="{{ other }}" (click)="toggleMember($event,'add', other)">
                                    <label [attr.for]="'other' + i">
                                    </label>
                                </div>
                            </td>
                            <td>{{ (i+1) }}</td>
                            <td>{{ other }}</td>
                            <td><span class="label label-info">Online</span></td>
                            <td>
                                <button type="button" class="btn btn-success btn-sm" (click)="clickToOperate(other,'add')">
                                    <i class="fa fa-plus"></i> 
                                    <span>Add</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
